<template>
    <p>组合式api</p>
    <p>a:   {{ a }}</p>
    <p>name:   {{ name }}</p>

    <p>reactive====</p>
    <p>obj : {{ obj }}</p>
    <p>obj.name : {{ obj.name }}</p>
    <p>obj.age : {{ obj.age }}</p>

    <p>arr: {{ arr }}</p>
    <p>arr[0]: {{ arr[0] }}</p>

    <p>computed</p>
    <p>aAddFive : {{ aAddFive }}</p>
    <p>objAgeAddFive : {{ objAgeAddFive }}</p>

    <button @click="aAddOne">a+1</button>
    <button @click="aAddTwo">a+2</button>

    <SonDemo foo="hello world" :age="a" />
</template>

<script setup>
import { ref,reactive, computed, watch } from 'vue'
// 引入子组件
import SonDemo from './SonDemo.vue'


const a = ref(0)
const name = ref('tom')


console.log(a);
console.log(a.value);

const testObj = ref({
    name:'tom',
    age:12
})

console.log(testObj.value.name);

const obj = reactive({
    name:'tom',
    age:12
})

console.log(obj.name);

const arr = reactive([1,2,3,4])

// computed

const aAddFive = computed(()=>{
    return a.value + 5
})
const objAgeAddFive = computed(()=>{
    return obj.age + 5
})

// methods

function aAddOne() {
    a.value++
}

const aAddTwo = ()=>{
    a.value +=2
}

// watch
watch(a, (newVal, oldVal)=>{
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
})


</script>